<template>
  <svg xmlns="http://www.w3.org/2000/svg" 
    :width="_width" 
    :height="_height"
    :spin="spin"
    :rtl="rtl"
    viewBox="0 0 33 33"
    preserveAspectRatio="xMidYMid meet"
    fill="none"
    role="presentation"
    ref="host"
  >
    <g><path data-follow-fill="currentColor" fill-rule="evenodd" clip-rule="evenodd" d="M6.957 23.841c-.05.042-.1.086-.15.13V6.7c0-.36.05-.702.15-1.023a3.32 3.32 0 0 1 .8-1.325c.634-.657 1.389-.985 2.264-.985h.62v19.615H9.402a3.85 3.85 0 0 0-1.415.253 3.733 3.733 0 0 0-1.031.607Zm.15-.484c.242-.162.5-.296.772-.401m-.772.4V6.7c0-.83.286-1.538.866-2.14.58-.601 1.258-.893 2.048-.893h.32v19.015m-4.128 7.951C5.34 29.725 4.9 28.622 4.9 27.342V6.7c0-1.472.494-2.73 1.484-3.757C7.374 1.917 8.592 1.4 10.02 1.4H28v23.55h-.3c-.626 0-1.16.229-1.617.7a2.344 2.344 0 0 0-.679 1.692c0 .659.225 1.217.681 1.69.456.472.99.701 1.615.701h.3V32H9.403c-1.245 0-2.314-.46-3.19-1.367Zm19.655-5.191c.51-.528 1.122-.792 1.832-.792V1.7H10.02c-1.348 0-2.488.484-3.421 1.452-.933.967-1.4 2.15-1.4 3.548v20.642c0 1.204.41 2.232 1.23 3.083.82.85 1.811 1.275 2.973 1.275H27.7v-1.667c-.71 0-1.32-.264-1.83-.793a2.639 2.639 0 0 1-.766-1.898c0-.738.255-1.371.764-1.9Zm-2.404 3.476a4.497 4.497 0 0 1-.267-1.576c0-.542.087-1.06.262-1.553a4.22 4.22 0 0 1 .403-.84H9.402c-.655 0-1.193.23-1.632.698a2.38 2.38 0 0 0-.663 1.695c0 .692.222 1.256.66 1.711.439.454.977.68 1.636.68h14.462a4.456 4.456 0 0 1-.401-.815Zm.76.815c.07.103.147.203.228.3H9.402c-.737 0-1.354-.257-1.85-.771-.497-.516-.745-1.156-.745-1.92 0-.738.248-1.371.744-1.9.497-.53 1.114-.794 1.852-.794h15.049a3.927 3.927 0 0 0-.71 1.24c-.163.46-.245.945-.245 1.454a4.2 4.2 0 0 0 .248 1.471c.122.329.281.635.479.92Zm1.869-6.751H12.247V3.367h13.846v19.615Zm-.3-19.315H12.547v19.015h13.246V3.667Z" :fill="_fill"/><path data-follow-fill="currentColor" d="M9.403 31.7c-1.162 0-2.153-.425-2.974-1.275-.82-.851-1.229-1.879-1.229-3.083V6.7c0-1.398.467-2.58 1.4-3.548.933-.968 2.074-1.452 3.42-1.452H27.7v22.95c-.71 0-1.321.264-1.832.792a2.644 2.644 0 0 0-.764 1.9c0 .736.255 1.37.765 1.898.51.529 1.12.793 1.831.793V31.7H9.403Zm-2.596-7.728a3.775 3.775 0 0 1 1.181-.737 3.851 3.851 0 0 1 1.415-.253h1.237V3.367h-.619c-.875 0-1.63.328-2.264.985a3.27 3.27 0 0 0-.95 2.348v17.272Zm5.44-.99h13.846V3.367H12.247v19.615Zm-2.844 7.051h15.049a4.156 4.156 0 0 1-.707-1.22 4.2 4.2 0 0 1-.248-1.471c0-.51.082-.994.245-1.454.161-.459.398-.872.71-1.24H9.402c-.737 0-1.354.265-1.85.794a2.68 2.68 0 0 0-.745 1.9c0 .764.248 1.404.744 1.92.497.514 1.114.771 1.852.771Z" :fill="_fill"/></g>
  </svg>
</template>

<script lang="ts">
import { Vue, prop } from 'vue-class-component';

class Props {
    width = prop<number | string>({
      type: [Number, String],
      required: false
    })
    
    height = prop<number | string>({
      type: [Number, String],
      required: false
    })
    
    stroke = prop<string>({
      type: String,
      required: false
    })
    
    fill = prop<string>({
      type: String,
      required: false
    })
    
    color = prop<string>({
      type: String,
      required: false
    })
    
    spin = prop<boolean>({
      type: Boolean,
      required: false
    })
    
    rtl = prop<boolean>({
      type: Boolean,
      required: false
    })
    

  // optional prop with default
  size = prop<number | string>({ default: '1em' })
}

export default class Frame3467093 extends Vue.with(Props) {
    get _fill(): string | undefined {
        return this.fill || this.color
    }
    get _stroke(): string | undefined {
        return this.stroke || this.color
    }
    get _width(): string | number {
      return this.width || this.size
    }
    get _height(): string | number {
      return this.height || this.size
    }
  mounted():void {
        if (!this._fill) {
            (this.$refs.host as HTMLElement)?.querySelectorAll('[data-follow-fill]').forEach(item => {
            item.setAttribute('fill', item.getAttribute('data-follow-fill') || '')
            })
        }
        if (!this._stroke) {
            (this.$refs.host as HTMLElement)?.querySelectorAll('[data-follow-stroke]').forEach(item => {
            item.setAttribute('stroke', item.getAttribute('data-follow-stroke') || '')
            })
        }
    }
    updated():void {
        if (!this._fill) {
            (this.$refs.host as HTMLElement)?.querySelectorAll('[data-follow-fill]').forEach(item => {
            item.setAttribute('fill', item.getAttribute('data-follow-fill') || '')
            })
        }
        if (!this._stroke) {
            (this.$refs.host as HTMLElement)?.querySelectorAll('[data-follow-stroke]').forEach(item => {
            item.setAttribute('stroke', item.getAttribute('data-follow-stroke') || '')
            })
        }
    }
}
</script>

<style scoped>
svg[spin="true"] {animation: iconpark-spin 1s infinite linear;}
svg[spin="true"][rtl="true"] {animation: iconpark-spin-rtl 1s infinite linear;}
svg[rtl="true"] {
  transform: scaleX(-1);
}
@keyframes iconpark-spin {
  0% { -webkit-transform: rotate(0); transform: rotate(0);} 100% {-webkit-transform: rotate(360deg); transform: rotate(360deg);}
}
@keyframes iconpark-spin-rtl {
  0% {-webkit-transform: scaleX(-1) rotate(0); transform: scaleX(-1) rotate(0);} 100% {-webkit-transform: scaleX(-1) rotate(360deg); transform: scaleX(-1) rotate(360deg);}
}
</style>
